<template>
  <div class="charts-container">
    <div ref="chart1" class="chart"></div>
    <div ref="chart2" class="chart"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount } from 'vue'

const chart1 = ref<HTMLDivElement | null>(null)
const chart2 = ref<HTMLDivElement | null>(null)

let myChart1: echarts.ECharts | null = null
let myChart2: echarts.ECharts | null = null

const option1 = {
  backgroundColor: 'rgba(128, 128, 128, 0.1)',
  title: {
    text: '23年和平精英枪械常用枪械',
    left: 40,
    top: 5,
  },
  tooltip: {
    show: true,
  },
  legend: {
    data: ['2023年枪械使用详情'],
    left: 422,
    top: 8,
    textStyle: {
      color: 'pink',
    },
  },
  xAxis: {
    data: ['Akm', 'Aug', 'M762', 'M416', 'Scar-l', 'Groza'],
    axisLabel: { interval: 0 },
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '2023年枪械使用详情',
      type: 'bar',
      barWidth: 40,
      data: [185, 62, 123, 205, 108, 128],
      itemStyle: {
        color: (params: any) => {
          const colorList = [
            '#fe9f4f',
            '#fead33',
            '#feca2b',
            '#fed728',
            '#c5ee4a',
            '#87ee4a',
            '#46eda9',
            '#47e4ed',
            '#4bbbee',
            '#4f8fa8',
            '#4586d8',
            '#4f68d8',
            '#F4E001',
            '#F0805A',
            '#26C0C0',
          ]
          return colorList[params.dataIndex]
        },
      },
    },
  ],
}

const option2 = {
  backgroundColor: 'rgba(128, 128, 128, 0.1)',
  title: {
    text: '24年和平精英枪械常用枪械',
    left: 40,
    top: 8,
  },
  tooltip: {
    show: true,
  },
  legend: {
    data: ['2024年枪械使用详情'],
    left: 422,
    top: 8,
    textStyle: {
      color: 'pink',
    },
  },
  xAxis: {
    data: ['Akm', 'Aug', 'M762', 'M416', 'Scar-l', 'Groza'],
    axisLabel: { interval: 0 },
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '2024年枪械使用详情',
      type: 'bar',
      barWidth: 40,
      data: [225, 98, 222, 256, 123, 111],
      itemStyle: {
        color: (params: any) => {
          const colorList = [
            '#fe9f4f',
            '#fead33',
            '#feca2b',
            '#fed728',
            '#c5ee4a',
            '#87ee4a',
            '#46eda9',
            '#47e4ed',
            '#4bbbee',
            '#4f8fa8',
            '#4586d8',
            '#4f68d8',
            '#F4E001',
            '#F0805A',
            '#26C0C0',
          ]
          return colorList[params.dataIndex]
        },
      },
    },
  ],
}

onMounted(() => {
  if (chart1.value && chart2.value) {
    myChart1 = echarts.init(chart1.value)
    myChart2 = echarts.init(chart2.value)

    myChart1.setOption(option1)
    myChart2.setOption(option2)

    // 多图表联动
    myChart1.group = 'group1'
    myChart2.group = 'group1'
    echarts.connect('group1')
  }
})

onBeforeUnmount(() => {
  myChart1?.dispose()
  myChart2?.dispose()
})
</script>

<style scoped>
.charts-container {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.chart {
  width: 600px;
  height: 400px;
}
</style>